<template>
	<view class="page-container">
		<view class="user-info" @click="toedituser">
			<image class="user-avatar" :src="user.nicPic.url"></image>
			<view class="user-details">
				<text class="user-name">{{ user.nicName || user.userId }}</text>
				<text class="user-wechat-id">邻里ID：{{ user.userId }}</text>
			</view>
			<uni-icons type="arrowright" size="20" class="user-arrow"></uni-icons>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" @click="handleSeting">
				<uni-icons type="paperclip" size="30"></uni-icons>
				<text>个人通用设置</text>
				<uni-icons type="arrowright" size="20"></uni-icons>
			</view>
			<view class="function-item">
				<uni-icons type="weixin" size="30"></uni-icons>
				<text>邻里交流管理</text>
				<uni-icons type="arrowright" size="20"></uni-icons>
			</view>

			<view class="function-item">
				<uni-icons type="gift" size="30"></uni-icons>
				<text>积分账户管理</text>
				<uni-icons type="arrowright" size="20"></uni-icons>
			</view>

			<view v-if="isOwn" v-for="(group, index) in groups" :key="index" class="function-item" @click="toGroupAdmin(group.groupId)">
				<view class="admin-menu">
					<view class=""><uni-icons type="staff" size="30"></uni-icons></view>
					<view class="">
						<text>邻里社区管理({{ group.groupName }})</text>
					</view>
					<view class=""><uni-icons type="arrowright" size="20"></uni-icons></view>
				</view>
			</view>

			<!-- 可以继续添加更多功能项 -->
		</view>
		<view class="about-me">
			<view>关于邻里</view>
			<view>邻里隐私政策</view>
			<view class="copyright" @click="handleDebug">
				<uv-icon></uv-icon>
				<text>copyright 2025 福建便利宝电子有限公司 版权所有;闽ICP备14017838号-7A</text>
			</view>
			<view class="copyright" @click="toTest">Operation 2025 福建清市惠农电子商有限公司 运营管理</view>
		</view>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	data() {
		return {
			isOwn: false,
			groups: [],
			count: 0
			// 可以在这里定义数据
		};
	},
	computed: {
		user() {
			return this.$store.state.msg.user;
		},
		own() {
			return this.$store.state.msg.own;
		}
	},

	methods: {
		handleDebug() {
			this.count++;
			if (this.count === 7) {
				getApp().globalData.debugShow = true;
			} else {
				getApp().globalData.debugShow = false;
			}
		},
		async getIsOwn() {
			const res = await db
				.collection('Group')
				.where({
					ownId: this.user.userId
				})
				.get();
			console.log(res);
			if (res.data.length > 0) {
				this.isOwn = true;
				this.groups = res.data;
			}
		},
		toTest(){
			uni.navigateTo({
				url:'/pages/mainTwo/mainTwo'
			})
		},
		onAddClick() {
			// 处理添加按钮点击事件
			console.log('点击了添加按钮');
		},
		onFunctionClick(item) {
			// 处理功能项点击事件
			console.log(`点击了 ${item}`);
		},
		toGroupAdmin(groupId) {
			uni.navigateTo({
				url: `/own/ownAdmin/ownAdmin?groupId=${groupId}`
			});
		},
		toedituser() {
			uni.navigateTo({
				url: '/pages/aboutMe/aboutMe'
			});
		},
		handleSeting() {
			uni.navigateTo({
				url: '/pages/seting/seting'
			});
		}
	}
};
</script>

<style lang="scss">
.page-container {
	background-color: #f5f5f5;
	height: 100vh;
	width: 100vw;
}
.admin-menu {
	display: flex;
	width: 100vw;
	align-items: center;
	justify-content: space-evenly;
}

.user-info {
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 10px;
	margin-top: 20px;

	.user-avatar {
		width: 60px;
		height: 60px;
		border-radius: 10%;
		margin-right: 20px;
	}

	.user-details {
		display: flex;
		flex-direction: column;
		flex: 1;

		.user-name {
			font-size: 24px;
			font-weight: bold;
		}

		.user-wechat-id {
			font-size: 14px;
			color: #999;
		}
	}

	.user-arrow {
		color: #999;
	}
}

.function-list {
	background-color: #fff;
	margin-top: 10px;
	:active {
		background-color: #ccc;
	}
	.function-item {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 80rpx;
		width: 750rpx;
		padding: 2px;
		border-bottom: 1px solid #eee;
		

		.menu_img {
			width: 50rpx;
			height: 50rpx;
			border-radius: 25rpx;
			padding-left: 20px;
			padding-right: 20px;
		}
		uni-icons {
			margin-right: 10rpx;
			color: #999;
		}

		text {
			flex: 1;
		}
	}
}
.about-me {
	display: flex;
	background-color: #ececec;
	flex-direction: column;
	align-items: center;
	width: 750rpx;
	padding: 20rpx;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	gap: 25rpx;
	font-size: 24rpx;
	color: #55aaff;
}
.copyright {
	text-align: center;
	font-size: 20rpx;
	color: #999999;
}
</style>
